<template>
	<div style="padding: 20rpx">
    <view class="charts-box" style="margin-bottom: 30rpx;">
      <qiun-data-charts
          type="column"
          :opts="opts"
          :chartData="chartData"
      />
    </view>
		<div class="box">
			<uni-forms ref="form" :modelValue="baseFormData" labelWidth="100px">
				<uni-forms-item label="反馈状态:" name="fkzt">
					<uni-data-select v-model="baseFormData.fkzt" :localdata="fkztDics"
						@change="changeFkztDict"></uni-data-select>
				</uni-forms-item>
			</uni-forms>
		</div>
    <div class="box">
      <uni-forms ref="form" :modelValue="baseFormData" labelWidth="100px">
        <uni-forms-item label="查阅时间:" name="cysj">
          <uni-data-select v-model="baseFormData.cysj" :localdata="cysjDics"
                           @change="changeCysjDict"></uni-data-select>
        </uni-forms-item>
      </uni-forms>
    </div>
    <div class="box" style="margin-bottom: 30px;">
      <div
          style="margin-bottom: 20rpx;">
        <div style="height: 50px;margin-top: 20rpx">
          <uni-row>
            <uni-col style="text-align: center" :span="sffk==1?8:12"><span>下达：{{ viewData.xdsl }}</span></uni-col>
            <uni-col style="text-align: center" :span="sffk==1?8:12"><span>已下达：{{ viewData.yxdsl }}</span></uni-col>
            <uni-col style="text-align: center" :span="8" v-show="sffk==1"><span>未反馈：{{ viewData.wfk }}</span>
            </uni-col>
          </uni-row>
        </div>
        <div>
          <uni-row>
            <uni-col style="text-align: center" :span="sffk==1?8:12"><span style="color: #bd3225">未读：{{
                viewData.wdsl
              }}</span></uni-col>
            <uni-col style="text-align: center" :span="sffk==1?8:12"><span style="color: #1087fa">已读：{{
                viewData.ydsl
              }}</span></uni-col>
            <uni-col style="text-align: center" :span="8" v-show="sffk==1"><span
                style="color: #577823">已反馈：{{ viewData.yfk }}</span></uni-col>
          </uni-row>
        </div>
      </div>
    </div>
		<div class="box">
      <div v-show="isMobile">
        <el-table :fit="false" v-loading="isLoading" :header-cell-style="{ background:'#409EFFF',color:'#000000',padding:'0 0'}"
                  :data="viewTxlTableData" border style="width: 100%">
          <el-table-column
              label="姓名"
              prop="name">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.parentDept" placement="top">
                <span style="display: inline-block">{{scope.row.name}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="qymc" label="企业名称">
          </el-table-column>
          <el-table-column align="center" prop="phone" label="电话">
          </el-table-column>
          <el-table-column width="77px" align="center" prop="cysj" label="查阅时间">
            <template slot-scope="scope">
              <div>{{getCysj(scope.row.cysj)}}</div>
            </template>
          </el-table-column>
          <el-table-column width="80px" align="center" prop="fkzt" label="反馈进度">
            <template slot-scope="scope">
              <el-tag v-if="'1' === scope.row.fkzt" type="danger">未读</el-tag>
              <el-tag v-if="'2' === scope.row.fkzt">已读</el-tag>
              <el-tag v-if="'4' === scope.row.fkzt" type="warning">未注册</el-tag>
              <el-tag v-if="'3' === scope.row.fkzt" type="success"
                      @click="toCkFile(scope.row.sid)">已反馈></el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="!isMobile">
        <div style="text-align: right;margin-bottom: 10px;">
          <el-button @click="handleExport" size="small" type="warning">导出</el-button>
        </div>
        <el-table v-loading="isLoading" :header-cell-style="{ background:'#409EFFF',color:'#000000',padding:'0 0'}"
                  :data="viewTxlTableData" border style="width: 100%">
          <el-table-column
              align="center"
              label="姓名"
              prop="name">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.parentDept" placement="top">
                <span style="display: inline-block">{{scope.row.name}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="qymc" label="企业名称">
          </el-table-column>
          <el-table-column align="center" prop="phone" label="电话">
          </el-table-column>
          <el-table-column align="center" prop="cysj" label="查阅时间">
            <template slot-scope="scope">
              <div>{{getCysj(scope.row.cysj)}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="fkzt" label="反馈进度">
            <template slot-scope="scope">
              <el-tag v-if="'1' === scope.row.fkzt" type="danger">未读</el-tag>
              <el-tag v-if="'2' === scope.row.fkzt">已读</el-tag>
              <el-tag v-if="'4' === scope.row.fkzt" type="warning">未注册</el-tag>
              <el-tag v-if="'3' === scope.row.fkzt" type="success"
                      @click="toCkFile(scope.row.sid)">已反馈></el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

			<el-pagination
				:small="true"
				:hide-on-single-page="true"
				:total="viewTxlPageParams.total"
				:current-page.sync="viewTxlPageParams.page"
				@current-change="getList">
			</el-pagination>
		</div>
		<view style="height: 100rpx;margin-top: 50rpx;"></view>
	</div>

</template>

<script>
	import {
		getRwbInfo,
		getUserByRwId,
    exportExcel,
	} from "@/api/system/xdwj";
	import {
		getDicts
	} from "@/api/system/dict/data";
	import config from '@/config';
  import { saveAs } from 'file-saver';
	export default {
		name: "ckList",
		data() {
			return {
        sffk: '1',
        isMobile: false,
        chartData: {},
        opts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 15, 0, 5],
          enableScroll: false,
          legend: {},
          xAxis: {
            disableGrid: true,
          },
          yAxis: {
            disabled:true,
            data: [
              {
                min: 0
              }
            ]
          },
          extra: {
            column: {
              type: "group",
              width: 30,
              activeBgColor: "#000000",
              activeBgOpacity: 0.08
            }
          }
        },
				isLoading: false,
				baseFormData: {
					fkzt: "",
          cysj:""
				},
				viewTxlTableData: [],
				fkztDics: [],
        cysjDics: [],
				viewData: {},
				sid: "",
				viewTxlPageParams: {
					total: 0,
					page: 1,
					limit: 10
				}
			}
		},
		onLoad(options) {
			this.sid = options.sid;
      this.isMobile = window.innerWidth < 600;
      window.addEventListener('resize', () => {
        this.isMobile = window.innerWidth < 600;
      });
		},
		computed: {
			getCysj() {
				return cysj => {
					if (!cysj) return "";
					let cysjString = "";

					if (cysj < 60) {
						cysjString = cysj + "秒";
					} else {
						let m = Math.floor(cysj / 60); // 转换为分钟
						let s = cysj % 60; // 余下的秒数
						cysjString = m + "分钟" + s + "秒";
					}
					return cysjString;
				}
			}
		},
		methods: {
      handleExport() {
        const loading = this.$loading({
          lock: true,
          text: '导出中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        exportExcel({
          ...this.baseFormData, ...this.viewTxlPageParams, rwId: this.sid
        }).then(data=>{
          console.log(data);
          // 验证是否为blob格式
          const blob = new Blob([data], { type: 'application/vnd.ms-excel' });
          saveAs(blob, "123.xlsx")
          loading.close();
        })

      },
      getServerData() {
        //模拟从服务器获取数据时的延时
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let data = this.viewData;
        let res = {
          categories: this.sffk==1?["已读", "未读", "已反馈", "未反馈"]:["已读", "未读"],
          series: [
            {
              name: `下达 ${data.xdsl}`,
              data:this.sffk==1? [ data.ydsl, data.wdsl, data.yfk, data.wfk]: [ data.ydsl, data.wdsl]
            },
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      },
			changeFkztDict(e) {
				this.baseFormData.fkzt = e
				this.getList();
			},
      changeCysjDict(e) {
				this.baseFormData.cysj = e
				this.getList();
			},
			getList() {
				this.isLoading = true
				getUserByRwId({
					rwId: this.sid,
					...this.baseFormData,
					...this.viewTxlPageParams
				}).then(res => {
					console.log("通讯录显示" + res);
					this.viewTxlTableData = res.rows;
					this.viewTxlPageParams.total = res.total;
					this.isLoading = false
				})
			},
			toCkFile(fkId) {
				this.$tab.navigateTo("/pages/home/through/ckFlie?fkId=" + fkId);
			}
		},
		created() {
			getDicts("fkzt").then(response => {
				for (let item of response.data) {
					this.fkztDics.push({
						"text": item.dictLabel,
						"value": item.dictValue
					})
				}
			});
      getDicts("cysj").then(response => {
        for (let item of response.data) {
          this.cysjDics.push({
            "text": item.dictLabel,
            "value": item.dictValue
          })
        }
      });
			getRwbInfo({
				sid: this.sid
			}).then(res => {
				this.viewData = res.data;
        if (res.data && res.data.sffk) {
          this.sffk = res.data.sffk;
        }
        this.getServerData();
			});
			this.getList();
		}
	}
</script>

<style scoped>
	page {
		background-color: #ffffff;
	}

	.box {
		border-bottom: solid #999696 1px;
	}

	label {
		margin-right: 5px;
	}
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>
